<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div class="contianer">
    <div class="bg-img-container">
    </div>
    <h1>模板pdf</h1>
    <div class="flex-div">
        <p>表1</p>
    </div>

    <table border="1" cellSpacing="1">
        <tr>
            <th>姓名</th>
            <td colspan="3">$!{name}</td>
        </tr>
        <tr>
            <th #if($!{gender}==1) class="blue" #else class="red" #end>性别</th>
            <td colspan="3">
                #if($!{gender}==1)
                男
                #else
                女
                #end
            </td>
        </tr>
        <tr>
            <th>出生日期</th>
            <td>$!{birthDate}</td>
            <th>联系方式</th>
            <td>$!{phone}</td>
        </tr>
    </table>
    <h1>双重For循环取值</h1>
    <div class="flex-div">
        <p>表2</p>
    </div>
    <table border="1" cellSpacing="1">
        <tr>
            <th>学历</th>
            <th>学科</th>
            <td class="gray-bg">分数</td>
        </tr>
        #foreach($item in $eduList)
        <tr>
            <th  #set($len= $item.size+1) rowspan="$len">$item.name</th>
            #foreach($result in $item.itemList)
        <tr>
            <td>$velocityCount、$result.subject</td>
            <td #if($result.num > 60) class="green" #else class="red" #end>$result.num</td>
        </tr>
        #end
        </tr>
        #end
    </table>
<!--   <div id="d1"></div>-->

</div>

</body>
<script>
    // function sendImg() {
    //     $.ajax({
    //         type: "POST", //提交方式
    //         url: "http://127.0.0.1:8081/velocity/base",
    //         // async: false,  // 重点，false是同步，true是异步
    //         // dataType:'json',  // 需要写上
    //
    //         success: function (result) {
    //             console.log(result)  // 打印出返回的值
    //             function c(){
    //                 var cc=new Image();
    //                 cc.src="data:image/jpg;base64,"+ result;
    //                 document.getElementById("d1").appendChild(cc);
    //             }
    //             c();
    //         }
    //     })
    //
    // }

</script>
<style>
    .blue {
        color: #244385;
        margin-left: 30px;
    }

    .green {
        color: #52c41a;
        margin-left: 30px;
    }

    .red {
        color: #c1181e;
        margin-left: 30px;
    }

    .flex-div {
        margin: 30px 0 15px;
        display: flex;
        align-items: center;
    }

    .line {
        width: 540px;
        height: 0px;
        border: dashed 1px #edf0f5;
    }

    table {
        width: 700px;
        border-collapse: collapse;
        /*border-spacing: 0;*/
        border-left: 1px solid #edf0f5;
        border-top: 1px solid #edf0f5;
    }

    th, td {
        border-right: 1px solid #edf0f5;
        border-bottom: 1px solid #edf0f5;
        padding: 5px 15px;
    }

    h1 {
        text-align: center;
        font-family: 'Microsoft YaHei';
        line-height: 60px;
        letter-spacing: 8px;
        color: #244385;
    }

    p {
        font-family: 'Microsoft YaHei';
        font-size: 20px;
        font-weight: normal;
        color: #244385;
        margin: 0 16px;
    }

    th {
        background-color: rgba(0, 0, 0, 0.01);
        width: 90px;
        min-width: 90px;
        max-width: 90px;
        text-align: left;
        text-indent: 10px;
        font-family: 'Microsoft YaHei';
        font-size: 16px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 48px;
        letter-spacing: 2px;
        color: #666666;
    }

    td {
        font-size: 16px;
        color: #000000;
        text-align: left;
        text-indent: 10px;
        padding-right: 20px;
        height: 50px;
    }

    table,tr, th, td {
        border: solid 1px #edf0f5;
    }

    .gray-bg {
        background-color: rgba(0, 0, 0, 0.01);
    }
</style>
</html>

